// 工具栏
<template>
  <a-card :bordered="false" class="left_funtion">
    <div class="search-box" title="探索">
      <img v-if="isSearch" @click="searchInput" src="@/assets/images/ic_01.png" alt="">
      <img v-else src="@/assets/images/ic_02.png" alt="">
      <div v-show="showSearch" class="input-box">
        <a-input ref="inputSearch" v-model="searchWord" placeholder="输入查找的关键词" style="width: 200px;" @blur="hiddenInput" @pressEnter="getSearch"/>
      </div>
    </div>
    <div title="编辑">
      <img v-if="isEdit" @click="getEdit" src="@/assets/images/ic_03.png" alt="">
      <img v-else src="@/assets/images/ic_04.png" alt="">
    </div>
    <div title="提交">
      <img v-if="isSubmit" @click="getSubmit" src="@/assets/images/ic_05.png" alt="">
      <img v-else src="@/assets/images/ic_06.png" alt="">
    </div>
    <!-- 添加 -->
    <div title="添加">
      <img v-if="isAdd" @click="getAdd" src="@/assets/images/ic_15.png" alt="">
      <img v-else src="@/assets/images/ic_16.png" alt="">
    </div>
    <!-- 导入 -->
    <div title="导入">
      <img v-if="isImport" @click="getImport" src="@/assets/images/ic_07.png" alt="">
      <img v-else src="@/assets/images/ic_08.png" alt="">
    </div>
    <!-- 导出 -->
    <div title="导出">
      <img v-if="isExport" @click="getExport" src="@/assets/images/ic_09.png" alt="">
      <img v-else src="@/assets/images/ic_10.png" alt="">
    </div>
    <div title="目录">
      <!-- directory -->
      <img v-if="isDirectory" @click="getToisDirectory" src="@/assets/images/ic_11.png" alt="">
      <img v-else src="@/assets/images/ic_12.png" alt="">
    </div>
    <div title="删除">
      <img v-if="isDelect" @click="getDelect" src="@/assets/images/ic_13.png" alt="">
      <img v-else src="@/assets/images/ic_14.png" alt="">
    </div>
  </a-card>
</template>

<script>
export default {
  name: 'ToolBar',
  props: {
    isSearch: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    isSubmit: {
      type: Boolean,
      default: false,
    },
    isAdd: {
      type: Boolean,
      default: false,
    },
    isExport: {
      type: Boolean,
      default: false,
    },
    isImport: {
      type: Boolean,
      default: false,
    },
    isDirectory: {
      type: Boolean,
      default: false,
    },
    isDelect: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // ...mapGetters(['getParkList', 'getParkNames', 'getBuildingImgList'])
  },
  watch:{
    searchWord:{
      handler(newVal,oldeVale){
        if(oldeVale && !newVal){
          this.getSearch()
        }
      }
    }
  },
  data(){
    return{
      showSearch:false,
      searchWord:'',
      showCheck:false,
    }
  },
  methods: {
    inputSearch(){},
    hiddenInput(){
      this.showSearch = false
    },
    getToisDirectory(){
        this.$emit('getToisDirectory')
    //   this.$router.push({
    //     name:'versionRepository',
    //     query:{
    //       directoryType:'OtherVariable'
    //     }
    //   })
    },
    getExport(){
      this.$emit('getExport')
    },
    getImport(){
      this.$emit('getImport')
    },
    getDelect(){
      this.showCheck =!this.showCheck
      this.$emit('getDelect',this.showCheck)
    },
    searchInput(){
      this.showSearch = true
      this.$nextTick(()=>{
        this.$refs.inputSearch.$refs.input.focus()
      })
      // if(!this.showSearch){
      //   this.searchWord = ''
      // }
    },
    getSearch(){
      this.$emit('search',this.searchWord)
    },
    getEdit(){
      this.$emit('getEdit')
    },
    getSubmit(){
      this.$emit('getSubmit')
    },
    getAdd(){
      this.$emit('getAdd')
    }
  }
}
</script>
<style lang="less" scoped>
  .left_funtion{
    margin-left: 5px;
    /deep/ .ant-card-body{
      padding: 1px;
    }
    div{
      padding:4px 0;
      img {
        cursor: pointer;
        width: 35px;
        height: 35px;
      }
    }
  }
  .search-box{
    position: relative;
    .input-box{
      position: absolute;
      top: 0;
      right: 50px;
      z-index: 20;
      border-radius: 20px;
      .ant-input{
      border-radius: 20px;
      height: 40px;
      }
      .ant-input-affix-wrapper{
        border-radius: 20px;
        height: 40px;
      }
    }
  }
</style>
